import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import {Card, Calendar, Badge, Popover, Tabs, Space, Tag, Divider} from 'antd';
import { Statistic, Row, Col } from 'antd';
import { ClockCircleOutlined } from '@ant-design/icons';
import {getEventByDate} from "@/services/dashboard";
import {dateFormatWithoutDay} from "@/utils/date";

const { TabPane } = Tabs;

export default class dashboardNode extends React.Component {

  state = {
    listEventData: []
  };

  dateCellRender = (value: { format: any; date: () => any; }) => {
    let key = Object.keys(this.state.listEventData).find(k => k === value.format('YYYYMMDD'));
    if (key) {
      const listData = this.state.listEventData[key] || [];
      const content = (
        <Tabs tabPosition={'left'} size={'small'}>
          {
            listData.map((item: any, index: number) => (
              <TabPane
                tab={
                  <Space>
                    <span className={`ant-badge-status-dot ant-badge-status-${item.type}`}></span>
                    {item.title}
                  </Space>
                }
                key={index}
                style={{ height: 250, width: 400}}
              >
                <Space>
                  <ClockCircleOutlined />{item.remindTime}
                  <Tag color="blue">进行中</Tag>
                </Space>
                <Divider >内 容</Divider>
                <Space>
                  {item.content}
                </Space>
              </TabPane>
            ))
          }
        </Tabs>
      );
      return (
        <Popover content={content} title={'待办事件 | ' + value.format('YYYY-MM-DD')}>
          <ul className="events">
            {listData.map((item: any) => (
              <li key={item.title}>
                <Badge status={item.type} text={item.title} />
              </li>
            ))}
          </ul>
        </Popover>
      );
    }
    return;
  }

  // @ts-ignore
  getMonthData = (value: { month: () => number; }) => {
    if (value.month() === 8) {
      return 1394;
    }
  }

  monthCellRender = (value: { month: () => number; }) => {
    const num = this.getMonthData(value);
    return num ? (
      <div className="notes-month">
        <section>{num}</section>
        <span>Backlog number</span>
      </div>
    ) : null;
  }

  onSelect = (value: any) => {
    console.log("--------->  ", value.format('YYYY-MM-DD'))
  };


  componentDidMount() {
    getEventByDate(Object.assign({
      date: dateFormatWithoutDay(new Date())
    })).then(response => {
      if (response.code === 0) {
        this.setState({ listEventData: response.data })
      }
    });
  }



  render() {

    return (
      <PageContainer>
        <Card>
          <div style={{padding: "30px"}}>
            <Row gutter={16}>
              <Col span={8}>
                <Card>
                  <Statistic
                    title="文章数"
                    value={6}
                  />
                </Card>
              </Col>
              <Col span={8}>
                <Card>
                  <Statistic
                    title="代办事件"
                    value={1}
                    valueStyle={{color: '#FF8C00'}}
                  />
                </Card>
              </Col>
              <Col span={8}>
                <Card>
                  <Statistic
                    title="点赞数"
                    value={2}
                    valueStyle={{color: '#3f8600'}}
                  />
                </Card>
              </Col>
            </Row>
          </div>
        </Card>

        <Card>
          <div>
            <Calendar
              dateCellRender={this.dateCellRender}
              monthCellRender={this.monthCellRender}/>
          </div>
        </Card>
      </PageContainer>
    );
  }
}
